Dynamic Drive DHTML Scripts- Drop Down Menu generator

New
|
Revised Hot FAQ Submit M Zone

Home Menus and navigation systems Here

Drop down menu generator All

Credits: Dynamic Drive
Last updated: Jan 5th, 2002 (for NS6 and Opera6 compatibility)

Description: Use the below menu generator to instantly create drop down menus. Click on a text link, and a menu appears beneath it containing "sub" links. Supports multiple menus per page.

This script works across all DHTML browsers (IE4+, NS4, NS6+, Opera 6), and degrades well with the rest.

Demo:

Webmaster

News

Directions: Before anything else, first select how many drop down menus you wish to insert onto the page (The above demo has two):

Step 1: Add the following fragment to the head section of your page:

Step 2: Insert the below code into the <body> section of your page where you wish the drop down link(s) to appear. If you had selected to generate more than one drop down menus, you'll see that each menu code is separated and indicated by comments. Once you've pasted the below code onto your page, you can decide where to place each menu simply by moving the code inside each commented block to the desired location in your page:

Step 3: Finally, insert the below code at the end of the <body> section, right above the </body> tag:

Configuring the drop down links: Obviously, you'll want to change the links inside the menus to your own. To do so, change the contents inside array "selectionx[]" of Step 1. You may also wish to change the width of the drop down menu, depending on the contents. To change it's width, go to the code in Step 3. Change the width attribute inside the each <div> from 120 to another pixel value.

Notes: The nature of this script requires that the drop down menu link always be left-aligned in the document. "So what if I want the link to appear in the center of the page?", you yell. Well, you'll need to use some cheap HTML techniques. One way is to put the link (code of Step 2) inside a columned table that's centered. For example:

Sample document:
	Menu here

Another note: The default url of each drop down menus is "alternate.htm", which is the url old browsers will follow (NS 3, IE 3, for example), for the sake of backwards compatibility. Make it a good one!